import "./css/index.css"

const THREE = require('three');

import * as fp from "lodash/fp"
import * as dat from "dat.gui"
import OrbitControls from 'three-orbitcontrols'
import TrackballControls from 'three-trackballcontrols'

import Stats from "./util/state"

import consts from "./consts"
import {cacheImages} from "./util/cacheImages"
import WEBGL from "./util/WebGL"


window.THREE = THREE


start();

var renderer;
function initRender() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  //告诉渲染器需要阴影效果
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
  renderer.clear();
  document.body.appendChild(renderer.domElement);
}

var scene;
function initScene() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xa0, 0xa0, 0xa0);
  //雾化效果
  scene.fog = new THREE.Fog(0x00ff00, 100, 120);
}

var camera;
function initCamera() {
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 40, 100);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
}

var cube;
function initObject() {
  var geometry = new THREE.CubeGeometry(10, 10, 8);
  var map = new THREE.TextureLoader().load("http://cqjy.jnaw.top/vendors/images/logo.png");
  var material = new THREE.MeshBasicMaterial({map: map});
  cube = new THREE.Mesh(geometry, material);
  cube.castShadow = true;
  cube.position.x = 25;
  cube.position.y = 5;
  cube.position.z = -5;
  scene.add(cube);

  var helper = new THREE.AxisHelper(50);
  scene.add(helper);

  var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
  var planeMaterial = new THREE.MeshStandardMaterial({color: 0xaaaaaa});
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.y = -0;
  plane.receiveShadow = true;
  scene.add(plane);
  // debugger
}

var stats;
function initStats() {
  stats = new Stats();
  stats.setMode(0);
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '0px';
  stats.domElement.style.top = '0px';
  document.body.appendChild(stats.domElement);

}

var controls;
function initControls() {
  controls = new TrackballControls(camera, renderer.domElement);
  //旋转速度
  controls.rotateSpeed = 5;
  //变焦速度
  controls.zoomSpeed = 3;
  //平移速度
  controls.panSpeed = 0.8;
  //是否不变焦
  controls.noZoom = false;
  //是否不平移
  controls.noPan = false;
  //是否开启移动惯性
  controls.staticMoving = false;
  //动态阻尼系数 就是灵敏度
  controls.dynamicDampingFactor = 0.3;
  //未知，占时先保留
  //controls.keys = [ 65, 83, 68 ];
  controls.addEventListener('change', render);
}

function render() {
  renderer.render(scene, camera);
}


//初始化dat.GUI简化试验流程
var gui;
function initGui() {
  //声明一个保存需求修改的相关数据的对象
  gui = {
    lightY: 30, //灯光y轴的位置
    cubeX: 25, //立方体的x轴位置
    cubeZ: -5, //立方体的z轴的位置
    exportScene: function () {
      var sceneJson = JSON.stringify(scene.toJSON());
      localStorage.setItem('scene', sceneJson);
    },
    clearScene: function () {
      scene = new THREE.Scene();
    },
    importScene: function () {
      var json = localStorage.getItem("scene");

      if (json) {
        var loadedGeometry = JSON.parse(json);
        var loader = new THREE.ObjectLoader();

        scene = loader.parse(loadedGeometry);
      }
    },
    fogNear: 80, //远近
    fogFar: 120
  };
  var datGui = new dat.GUI();
  //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
  datGui.add(gui, "lightY", 0, 100);
  datGui.add(gui, "cubeX", 0, 60);
  datGui.add(gui, "cubeZ", -30, 30);
  datGui.add(gui, "exportScene");
  datGui.add(gui, "clearScene");
  datGui.add(gui, "importScene");
  datGui.add(gui, "fogNear", 0, 100);
  datGui.add(gui, "fogFar", 0, 500);
}

var rotationBool = true;
function animate() {
  // if(rotationBool){
  //     cube.rotation.x += 0.01;
  //     cube.rotation.y += 0.01;
  // }
  controls.update();
  stats.update();
  //更新相关位置
  light.position.y = gui.lightY;
  cube.position.x = gui.cubeX;
  cube.position.z = gui.cubeZ;
  scene.fog.near = gui.fogNear;
  scene.fog.far = gui.fogFar;
  render();
  requestAnimationFrame(animate);
}

var light;
function initLight() {
  // scene.add(new THREE.AmbientLight(0x444444));

  light = new THREE.PointLight(0xffffff);
  light.position.set(15, 30, 10);

  //告诉光源需要开启阴影投射
  light.castShadow = true;

  scene.add(light);
}

function start() {
  initRender();
  initScene();
  initCamera();
  initLight();
  initObject();
  initControls();
  initGui();
  initStats();
  animate();
}

